<template>
  <div id="app">
          <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
@import '@/styles/variables.scss';

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#app {
  height: 100vh;
}

.app-wrapper {
  height: 100%;
}

.sidebar-container {
  background-color: $menuBg;
  height: 100%;
  transition: width 0.3s;
  .el-menu {
    border: none;
  }
}

.app-header {
  background-color: #fff;
  border-bottom: 1px solid $border-light;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;

  .header-left {
    display: flex;
    align-items: center;

    .fold-btn {
      padding: 0 15px;
      cursor: pointer;
      font-size: 20px;
      color: $text-regular;

      &:hover {
        color: $color-primary;
      }
    }

    .app-title {
      font-size: $font-size-large;
      font-weight: bold;
      color: $text-primary;
      margin-left: 8px;
    }
  }

  .header-right {
    .el-dropdown-link {
      cursor: pointer;
      color: $color-primary;
    }
  }
}

.el-main {
  background-color: $background-light;
  padding: 20px;
}
</style> 